<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <%@include file="/WEB-INF/jsp/common.jsp"%>
</head>
<body>
<h2>用户管理</h2>
<hr>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名称：</label>
            <div class="layui-input-inline">
                <input type="text" id="username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-inline">
                <%--<input type="text" id="rolelabel" autocomplete="off" class="layui-input">--%>
                    <select name="role" id="role" lay-verify="required">
                        <option value="-1">请选择</option>

                    </select>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" onclick="reloadData();"><i class="layui-icon layui-icon-search"></i> 搜索</button>
        </div>
    </div>
</form>
<table id="userTable" lay-filter="userTable"></table>
<script>
    layui.config({
        base: '${path}/assets/layui/lay/modules/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects'
    });
    function reloadData(){
        layui.table.reload("userTable",{
            page:{
                curr : 1
            },
            where : {
                username : $("#username").val(),
                roleids:$("#role").val()
            }
        })
    }

    //家庭住址选择器



    layui.use(['table','form','laydate','upload'],function () {
        var table= layui.table;
        var form = layui.form;
        var laydate = layui.laydate;


        //渲染表格
        table.render({
            elem: '#userTable',
            url: '${path}/user/list',
            page:true,
            even: true,
            toolbar:'#toolbarDemo',
            cols:[[
                {type:'radio'},
                {field:'userid',title:'标号'},
                {field:'loginname',title:'登录名称'},
                {field:'username',title:'姓名'},
                {field:'birthdate',title:'生日'},
                {field:'role',title:'角色',templet:function(d){
                        if (d.role == null){
                            return"-"
                        } else{
                            return d.role.rolelabel;
                        }

                }},
                {field:'createtime',title:'创建时间'},
                {field:'hello', title:'操作',toolbar:'#barDemo'}
            ]]
        })

        /*下拉框赋值*/
        $.get("${path}/role/search",function (data) {
            $.each(data,function(){
                var opt = $("<option></option>").appendTo("#role");
                opt.text(this.rolelabel).val(this.roleid);
            });
            form.render();
        })


        table.on('toolbar(userTable)',function (obj) {
            var e = obj.event;

            switch (e) {
                case 'add':
                    $.get('${path}/user/form',function (str) {
                        layer.open({
                            type: 1,
                            title: '用户添加',
                            area: ['100%','100%'],
                            maxmin: true,
                            content : str,
                            btn:['确定','取消'],
                            yes:function (index) {
                                var params = $("#add_user_form").serialize();

                                $.post('${path}/user/add',params,function () {
                                    table.reload('userTable');
                                    layer.close(index);
                                })
                            }
                        })
                    })
                    break;
            }
        })

        table.on("tool(userTable)",function (obj) {
            var data = obj.data;
            var e = obj.event;
            if (e == "edit"){
                $.get("${path}/user/getUser",{userid:data.userid},function (userstr) {

                    $.get('${path}/user/editform',function (str) {
                        layer.open({
                            type: 1,
                            title: '修改用户信息',
                            area: ['100%','100%'],
                            maxmin: true,
                            content : str,
                            btn:['确定','取消'],
                            success:function(){
                                setTimeout(function () {
                                    userstr["roleid"] = userstr.role.roleid;
                                    form.val('userForm',userstr);
                                    form.render("select")
                                },100)
                            },
                            yes:function (index) {
                                var params = $("#add_user_form").serialize();
                                console.log(params);
                                $.post('${path}/user/edit',params,function () {
                                    table.reload('userTable');
                                    layer.close(index);
                                })
                            }
                        })
                    })
                })
            }else if (e == "del"){
                layer.open({
                    title: "友情提示",
                    content:"你确定删除吗?",
                    btn:['确定','取消'],
                    yes:function () {
                        $.post("${path}/user/batchDelete",{ids:data.userid},function () {
                            layer.msg("删除成功了");
                            table.reload('userTable');
                        });
                    }
                })
            }
        })
    })
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <shiro:hasPermission name="user:add">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
        </shiro:hasPermission>

    </div>
</script>
<script type="text/html" id="barDemo">
    <shiro:hasPermission name="user:upd">
        <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> </a>
    </shiro:hasPermission>
    <shiro:hasPermission name="user:del">
        <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </shiro:hasPermission>

</script>
</body>
</html>
